﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	xmlns:WpfHero="clr-namespace:WpfHero;assembly=WHEngine"
	x:Class="Tutorial.SongScroller"
	x:Name="UserControl"
	d:DesignWidth="519" d:DesignHeight="290" xmlns:Tutorial="clr-namespace:Tutorial">
	<UserControl.Resources>
		<Tutorial:GemPauseConverter x:Key="GemPauseConverter"/>
		<Tutorial:GemSizeConverter x:Key="GemSizeConverter"/>
		<ItemsPanelTemplate x:Key="GemLinePanelTemplate">
			<StackPanel IsItemsHost="True" Orientation="Horizontal"/>
		</ItemsPanelTemplate>
		<DataTemplate x:Key="GemTemplate">
			<Tutorial:GemControl x:Name="gemControl" Width="{Binding Converter={StaticResource GemSizeConverter}, Mode=OneWay}" Height="31" Status="{Binding Path=Status, Mode=Default}" Margin="{Binding Converter={StaticResource GemPauseConverter}, Mode=OneWay}"/>
			<DataTemplate.Triggers>
				<Trigger Property="Status" SourceName="gemControl" Value="Missed">
					<Setter Property="Opacity" TargetName="gemControl" Value="0.5"/>
				</Trigger>
				<Trigger Property="Status" SourceName="gemControl" Value="Hit">
					<Setter Property="BitmapEffect" TargetName="gemControl">
						<Setter.Value>
							<OuterGlowBitmapEffect/>
						</Setter.Value>
					</Setter>
				</Trigger>
			</DataTemplate.Triggers>
		</DataTemplate>
	</UserControl.Resources>

	<!-- datacontext for testing 
	<UserControl.DataContext>
		<WpfHero:WHEngine>
			<WpfHero:WHEngine.Gemline1Gems>
				<WpfHero:GemModel EndAt="00:00:01" StartAt="00:00:00.5"/>
				<WpfHero:GemModel EndAt="00:00:02.1" StartAt="00:00:02"/>
			</WpfHero:WHEngine.Gemline1Gems>
			<WpfHero:WHEngine.Gemline3Gems>
				<WpfHero:GemModel EndAt="00:00:05" StartAt="00:00:04"/>
			</WpfHero:WHEngine.Gemline3Gems>
		</WpfHero:WHEngine>
	</UserControl.DataContext> -->

	<Grid x:Name="LayoutRoot">
		<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Width="497" HorizontalAlignment="Left" Height="272" VerticalAlignment="Top">
			<Grid x:Name="grid">
				<StackPanel Margin="{Binding Path=Margin, ElementName=path, Mode=Default}" x:Name="stackPanel">
					<ItemsControl Background="#FF3E2E2E" Height="48" ItemsSource="{Binding Path=Gemline1Gems, Mode=Default}" ItemsPanel="{DynamicResource GemLinePanelTemplate}" ItemTemplate="{DynamicResource GemTemplate}"/>
					<ItemsControl Background="#FF384429" Height="48" ItemsSource="{Binding Path=Gemline2Gems, Mode=Default}" ItemsPanel="{DynamicResource GemLinePanelTemplate}" ItemTemplate="{DynamicResource GemTemplate}"/>
					<ItemsControl Background="#FF1E385A" Height="48" ItemsSource="{Binding Path=Gemline3Gems, Mode=Default}" ItemsPanel="{DynamicResource GemLinePanelTemplate}" ItemTemplate="{DynamicResource GemTemplate}"/>
					<ItemsControl Background="#FF575823" Height="48" ItemsSource="{Binding Path=Gemline4Gems, Mode=Default}" ItemsPanel="{DynamicResource GemLinePanelTemplate}" ItemTemplate="{DynamicResource GemTemplate}"/>
					<ItemsControl Background="#FF441442" Height="48" ItemsSource="{Binding Path=Gemline5Gems, Mode=Default}" ItemsPanel="{DynamicResource GemLinePanelTemplate}" ItemTemplate="{DynamicResource GemTemplate}"/>
				</StackPanel>
			</Grid>
		</ScrollViewer>
		<Path HorizontalAlignment="Left" Margin="50,1.667,0,36.289" Width="Auto" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FFFF0303" StrokeEndLineCap="Round" StrokeStartLineCap="Round" StrokeThickness="5" Data="M60,3.6666667 L60,250.71075" x:Name="path"/>
	</Grid>
</UserControl>